<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>video</title>
    <link rel="stylesheet" href="css/app.min.css">
  </head>
  <body>
    <!-- ==== START WAPPER ==== -->
    <div id="wapper">

      <!-- ==== START NAV ==== -->
      <nav role="navigation">
            <div class="logo"><a href="#">校视通</a></div>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li class="current"><a href="yunke.html">云课</a></li>
                <li><a href="#">公社</a></li><li><a href="#">活动</a></li>
                <li><a href="#">资讯</a></li><li><a href="beike.html">备课</a></li>
                <li id="last"><a href="#">校团众筹</a></li>
            </ul>

            <form class="search" action="#" method="post">
                <input type="search" class="text" name="name" placeholder="搜索的内容..."><button class="btn-search" searchtype="submit" name="button"><i class="fa fa-search fa-lg"></i></button>
            </form>
      </nav>
      <!-- ==== END NAV ==== -->

      <!-- ==== START VIDEO ==== -->
      <div id="video-window">
        <div id="window">
          <video class="plug-in" src="http://7xpl2y.com1.z0.glb.clouddn.com/asdf.mp4" controls></video>
          <div class="video-index">
            <a href="#">云课</a><span>&gt;</span><a href="#">研修</a><span>&gt;</span><a href="#">视频名称</a>
          </div>
          <div class="accessory">
            <a href="#"><i class="fa fa-thumbs-o-up"></i><span>1419</span></a>
            <a href="#"><i class="fa fa-share-square-o"></i><span>分享</span></a>
            <a href="#"><i class="fa fa-star-o"></i><span>收藏</span></a>
            <a href="#"><i class="fa fa-download"></i><span>下载</span></a>
          </div>
        </div>
      </div>

      <div id="comment">
        <h2>评论</h2>
        <div class="board">
          <textarea name="name" rows="2" cols="80"></textarea>
          <button type="button" name="button">提交</button>
        </div>
        <div class="comments">
          <div class="">
            <a href="#" class="avatar"><img src="images/00.jpeg" alt="" /></a>
            <a href="#" class="id">用户名</a>
            <p class="contain">评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</p>
            <time>2016-02-02</time>
          </div>
          <div class="">
            <a href="#" class="avatar"><img src="images/00.jpeg" alt="" /></a>
            <a href="#" class="id">用户名</a>
            <p class="contain">评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</p>
            <time>2016-02-02</time>
          </div>
          <div class="">
            <a href="#" class="avatar"><img src="images/00.jpeg" alt="" /></a>
            <a href="#" class="id">用户名</a>
            <p class="contain">评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</p>
            <time>2016-02-02</time>
          </div>
        </div>
      </div>
      <div id="relation">
        <h2>相关视频</h2>
        <div class="">
          <a href="#">
            <img src="images/00.jpeg" alt="" />
            <p>视频介绍/视频名称</p>
          </a>
        </div>
        <div class="">
          <a href="#">
            <img src="images/00.jpeg" alt="" />
            <p>视频介绍/视频名称</p>
          </a>
        </div>
        <div class="">
          <a href="#">
            <img src="images/00.jpeg" alt="" />
            <p>视频介绍/视频名称</p>
          </a>
        </div>
      </div>

      <!-- ==== END VIDEO ==== -->


      <!-- ==== START FOOTER ==== -->
      <footer role="contentinfo" class="footer">
      <div class="f">
          <div class="f1">
            <h3>统计信息</h3>
            <p><span>网站总访问量 : </span><span>1365544</span></p>
            <p><span>当前在线人数 : </span><span>42554</span></p>
            <p><span>页面加载时间 : </span><span>0.000234</span></p>
          </div>
          <div class="f3">
            <h3>联系我们</h3>
            <p><i class="fa fa-map-marker"></i>江苏省南京市</p>
            <p><i class="fa fa-phone"></i>123-456-789</p>
            <p><i class="fa fa-envelope"></i>1234567@qq.com</p>
          </div>
          <div class="f4">
            <h3>主办者</h3>
            <p>南京市XXX教育学院</p>
            <p>南京市XXX教育研究委员会</p>
            <p>南京市XXX教育学会</p>
          </div>
        </div>
        <div class="copy">
          <small>&copy; Copyright 2016</small>
          <p>
            <a href="#" class="fa fa-qq" title="QQ"></a>
            <a href="#" class="fa fa-weibo" title="微博"></a>
            <a href="#" class="fa fa-renren" title="人人网"></a>
            <a href="#" class="fa fa-weixin" title="微信"></a>
          </p>
        </div>

      </footer>

    </div>
    <!-- ==== END WAPPER ==== -->
    <script type="text/javascript" src="js/main.min.js"></script>
  </body>
</html>
